<template>
	<view>
		<waterMark></waterMark>
		<view class="tabBar_css">
			<u-tabbar :value="currentPagePath" :fixed="true" :placeholder="true" :safeAreaInsetBottom="true">
				<u-tabbar-item v-for="(item, index) in tabBarList" :key="index" :text="item.text" :name="item.pagePath"
					@click="click_page(item)">
					<image class="u-page__item__slot-icon tabBar_css_icon" slot="inactive-icon"
						:src="require('../../static/images/tarbar/' + item.iconfont.icon)"></image>
					<image class="u-page__item__slot-icon tabBar_css_icon_active" slot="active-icon"
						:src="require('../../static/images/tarbar/' + item.iconfont.activeIcon)"></image>
				</u-tabbar-item>
			</u-tabbar>
		</view>
	</view>
</template>

<script>
	import {
		mapGetters
	} from 'vuex';
	export default {
		name: 'tabBar',
		props: {
			currentPagePath: String
		},
		data() {
			return {
			};
		},
		onLoad() {
		},
		onShow() {
		},

		computed: {
			tabBarList() {
				return JSON.parse(sessionStorage.getItem("tabBarList"))
			}
		},
		watch: {
			tabBarList(newLength, oldLength) {
				console.log("测试");
			},
			immediate: true,
			deep: true
		},
		methods: {
			click_page(item) {
				console.log(item);
				let page = '/' + item.pagePath;
				uni.navigateTo({
					url: page
				});
			}
		}
	};
</script>

<style lang="scss">
	.tabBar_css {
		position: fixed;
		bottom: 0;
		z-index: 9900;
		width: 100%;

		.u-page__item__slot-icon {
			width: 1.2rem;
			height: 1.2rem;
			border-radius: 0.5rem;
		}

		&_icon_active {
			padding: 0.4rem;
			background-color: #3496FB;
		}

		&_icon {
			padding: 0.4rem;
			background-color: #ccc;
		}

		/deep/ .u-tabbar__content__item-wrapper {
			height: 4.5rem;
		}
	}
</style>